<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图片栏</title>
    <link rel="stylesheet" type="text/css" href="css.css">
    <script type="text/javascript" src="js.js"></script>
    <script>
        window.onload = function(argument) {
            var obody = document.getElementsByTagName('body')[0];
            var omainimg = document.getElementById('mainimg');
            var oaleft = document.getElementById('aleft');
            var olefticon = document.getElementById('leftico');
            var orighticon = document.getElementById('rightico');
            var oaright = document.getElementById('aright');


            var otxt = document.getElementsByTagName('input')[0];
            var oaright = document.getElementById('aright');
            var oul = document.getElementById('ul');
            var ali = oul.getElementsByTagName('li');
            var oul1 = document.getElementById('ul1');
            var ali0 = oul1.getElementsByTagName('li');
            var ali0index = 3;
            var nowimg = 0;
            oul.timer = null
            for (var i = 0; i < ali0.length; i++) {

                ali0[i].timer = null;
            }
            for (var i = 0; i < ali.length; i++) {
                ali[i].timer = null;
            }
            oaleft.timer = null;

            oaright.timer = null;

            olefticon.timer = null;

            orighticon.timer = null;

            //左右按钮显示；
            olefticon.onmouseover = oaleft.onmouseover = function(argument) {
                move(olefticon, 'opacity', 100)
            };
            olefticon.onmouseout = oaleft.onmouseout = function(argument) {

                move(olefticon, 'opacity', 30)
            };
            orighticon.onmouseover = oaright.onmouseover = function(argument) {
                move(orighticon, 'opacity', 100)
            };
            orighticon.onmouseout = oaright.onmouseout = function(argument) {

                move(orighticon, 'opacity', 30)
            };

            function imgchange() {
                for (var j = 0; j < ali.length; j++) {
                    move(ali[j], 'opacity', 60);
                }
                //alert(nowimg);
                move(ali[nowimg], 'opacity', 100)
                ali0[nowimg].style.zIndex = ali0index++;
                ali0[nowimg].style.height = 0;
                move(ali0[nowimg], 'height', 281);
                if (nowimg == 0) {
                    move(oul, 'left', 0)
                } else if (nowimg == (ali.length - 1)) {
                    move(oul, 'left', -(nowimg - 2) * ali[0].offsetWidth)
                } else {
                    move(oul, 'left', -(nowimg - 1) * ali[0].offsetWidth)
                }

            };

            for (var i = 0; i < ali.length; i++) {
                ali[i].num = i;
                ali[i].onclick = function(argument) {

                    if (this.num == nowimg) return;
                    nowimg = this.num;
                    imgchange();
                };
                ali[i].onmouseover = function(argument) {
                    ali[nowimg].style.opacity = 1;
                    move(this, 'opacity', 100);

                }
                ali[i].onmouseout = function(argument) {

                    if (this.num != nowimg) {
                        move(this, 'opacity', 60);
                    }

                }
            };
            olefticon.onclick = function(argument) {
                nowimg = nowimg - 1;
                if (nowimg == -1) {
                    nowimg = ali.length - 1;
                }
                imgchange();
            }
            orighticon.onclick = function(argument) {
                nowimg = nowimg + 1;
                if (nowimg == 6) {
                    nowimg = 0
                }
                imgchange();
            }
            var timer = setInterval(orighticon.onclick, 2000);
            obody.onmouseover = function(argument) {
                clearInterval(timer);
            }
            obody.onmouseout = function(argument) {
                timer = setInterval(orighticon.onclick, 2000);
            }
        };
    </script>
</head>

<body>
    <input type="text" class="txt">
    <div class="body">
        <div id="mainimg">
            <ul id="ul1">
                <a id="aleft" href="javascript:;"></a>
                <a id="aright" href="javascript:;"></a>
                <li class="li0" style="z-index: 2"><img src="img/img0.jpg" alt="" class="img0"></li>
                <li class="li0"><img src="img/img1.jpg" alt="" class="img0"></li>
                <li class="li0"><img src="img/img2.jpg" alt="" class="img0"></li>
                <li class="li0"><img src="img/img3.jpg" alt="" class="img0"></li>
                <li class="li0"><img src="img/img4.jpg" alt="" class="img0"></li>
                <li class="li0"><img src="img/img5.jpg" alt="" class="img0"></li>
                <img id="leftico" src="img/acfun.ico" alt="">
                <img id="rightico" src="img/acfun.ico" alt=""></ul>
        </div>
        <div class="ulimg">
            <ul id="ul">
                <li class="li" style="opacity: 1">
                    <img class="img" src="img/img0.jpg" alt="">
                </li>
                <li class="li">
                    <img class="img" id="img1" src="img/img1.jpg" alt="">
                </li>
                <li class="li">
                    <img class="img" src="img/img2.jpg" alt="">
                </li>
                <li class="li">
                    <img class="img" src="img/img3.jpg" alt="">
                </li>
                <li class="li">
                    <img class="img" src="img/img4.jpg" alt="">
                </li>
                <li class="li">
                    <img class="img" src="img/img5.jpg" alt="">
                </li>
            </ul>
        </div>
    </div>
</body>

</html>
